<template>
	<view class="Lu-qd-body">
		<view class="Lu-qd-bgblue"></view>
		<view class="Lu-qd-rl clearfix">
			<image src="../../../static/image/qiandao/rl.png" class="Lu-qd-rlimg fl"></image>
			<div class="Lu-qd-rq fl">
				<view class="Lu-qd-xq">{{weekdata}}</view>
				<view class="Lu-qd-td">{{timedata}}</view>
			</div>
			<view class="Lu-qd-cg fr">
				<image src="../../../static/image/qiandao/dkwc.png"></image>
			</view>
		</view>
		<view class="Lu-dk-body">
			<!-- <view>
				<view class="Lu-dk-tit">
					<text></text><text>打卡方式</text>
				</view>
				<view class="Lu-dk-List">
					<image src="../../../static/image/qiandao/fx.png" class="Lu-dk-Listimg"></image>
					<view class="Lu-dk-Listcenter">点击“分享并打卡”</view>
				</view>
				<view class="Lu-dk-bg"></view>
				<view class="Lu-dk-List">
					<image src="../../../static/image/qiandao/pyq.png" class="Lu-dk-Listimg"></image>
					<view class="Lu-dk-Listcenter">跳转至朋友圈并完成分享</view>
				</view>
				<view class="Lu-dk-bg"></view>
				<view class="Lu-dk-List">
					<image src="../../../static/image/qiandao/lj.png" class="Lu-dk-Listimg"></image>
					<view class="Lu-dk-Listcenter">在朋友圈打开链接，查看打卡信息</view>
				</view>
				<view class="Lu-dk-btn">分享并打卡</view>
			</view> -->
			
			<view>
				<view class="Lu-dk-tit">
					<text></text><text>打卡已完成</text>
				</view>
				<view class="Lu-dk-List1">
					<view class="Lu-dk-dayfl">今日返利</view>
					<view class="Lu-dk-flmoney">￥<text class="Lu-dk-flnum">5.20</text></view>
					<view class="Lu-dk-fllj">累计返利 1024 元</view>
				</view>
				<view class="Lu-dk-btn Lu-dk-btn1">今日已打卡</view>
			</view>
		</view>
		<view class="Lu-F-footer">
			<view class="Lu-F-Lists">
				<view :class="{ 'active':phactive}" @click="change()">趣榜单</view>
				<view :class="{ 'active':!phactive}" @click="changes()">打卡记录</view>
			</view>
			<view class="Lu-F-ph" v-if="phactive">
				<view class="Lu-F-phheader">
					<view class="clearfix Lu-F-phtit">
						<view class="fl Lu-F-phtit1">排行</view>
						<view class="fl Lu-F-phtit2">昵称</view>
						<view class="fr Lu-F-phtit3">累计返现</view>
					</view>
					
					<view class="Lu-F-phLists">
						<view class="Lu-F-ph-list clearfix">
							<view class="Lu-F-ph-listimg fl"><image src="../../../static/image/qiandao/gj.png"></image></view>
							<view class="Lu-F-ph-listname fl">{{Arrays[0].name}}</view>
							<view class="Lu-F-ph-listmoney fr">{{Arrays[0].money}}元</view>
						</view>
						<view class="Lu-F-ph-list clearfix">
							<view class="Lu-F-ph-listimg fl"><image src="../../../static/image/qiandao/yj.png"></image></view>
							<view class="Lu-F-ph-listname fl">{{Arrays[1].name}}</view>
							<view class="Lu-F-ph-listmoney fr">{{Arrays[1].money}}元</view>
						</view>
						<view class="Lu-F-ph-list clearfix">
							<view class="Lu-F-ph-listimg fl"><image src="../../../static/image/qiandao/jj.png"></image></view>
							<view class="Lu-F-ph-listname fl">{{Arrays[2].name}}</view>
							<view class="Lu-F-ph-listmoney fr">{{Arrays[2].money}}元</view>
						</view>
						<view class="Lu-F-ph-list clearfix" v-for="(array,index) in Arrays" :key="index" v-if="index > 2">
							<view class="Lu-F-ph-listimg fl">{{index+1}}</view>
							<view class="Lu-F-ph-listname fl">{{array.name}}</view>
							<view class="Lu-F-ph-listmoney fr">{{array.money}}元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="Lu-F-jl" v-else>
				<view class="Lu-F-jltit clearfix">
					<view class="fl">打卡时间</view>
					<view class="fr">今日返现</view>
				</view>
				<view class="Lu-F-jlLists">
					<view class="Lu-F-jlList clearfix" v-for="(array,index) in dakaArrays" :key="index">
						<view class="Lu-F-jltime fl">
							{{array.time}}
						</view>
						<view class="Lu-F-jlmoney fr">
							{{array.money}} 元
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				timedata:'',
				weekdata:'',
				phactive:true,
				Arrays:[
					{
						name:'老师傅',
						money:5555
					},
					{
						name:2,
						money:5555
					},
					{
						name:3,
						money:5555
					},
					{
						name:4,
						money:5555
					}
				],
				dakaArrays:[
					{
						time:'2020-05-23 14:03',
						money:5.20
					},
					{
						time:'2020-05-23 14:03',
						money:5.20
					},
					{
						time:'2020-05-23 14:03',
						money:5.20
					},
					{
						time:'2020-05-23 14:03',
						money:5.20
					},
					{
						time:'2020-05-23 14:03',
						money:5.20
					}
				]
			};
		},
		onLoad() {
			this.getTime()
		},
		methods: {
			change(){
				this.phactive = true
			},
			changes(){
				this.phactive = false
			},
			getTime:function(){
				var a = new Array("日", "一", "二", "三", "四", "五", "六"); 
				var week = new Date().getDay();
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '/' + month + '/' + day;
				this.timedata = timer
				this.weekdata = "星期"+ a[week]
				// console.log(this.weekdata)
			}, 
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color: #EBF3FF;
	}
	.Lu-qd-bgblue{
		background-color: #1459F6;
		height: 70rpx;
	}
	.Lu-qd-rl{
		width: 566rpx;
		height: 92rpx;
		padding: 28rpx 32rpx;
		margin: 0 auto;
		border-radius: 32rpx;
		box-shadow: 0rpx 5rpx 3rpx 3rpx rgba(0,0,0,.2);
		margin-top: -42rpx;
		z-index: 100;
		background-color: #fff;
		position: relative;
		.Lu-qd-rlimg{
			width: 48rpx;
			height: 48rpx;
			margin-top: 24rpx;
		}
		.Lu-qd-rq{
			margin-left: 34rpx;
			margin-top: 0rpx;
			.Lu-qd-xq{
				color: #1459F6;
				font-size: 36rpx;
			}
			.Lu-qd-td{
				margin-top: 14rpx;
				color: #333333;
				font-size: 24rpx;
			}
		}
		.Lu-qd-cg{
			width: 48rpx;
			height: 32rpx;
			margin-top: 24rpx;
			image{
				width: 48rpx;
				height: 32rpx;
			}
		}
	}
	.Lu-dk-body{
		margin: 0 30rpx;
		position: relative;
		padding: 66rpx 34rpx;
		background-color: #fff;
		border-radius: 32rpx;
		box-shadow: 0rpx 5rpx 3rpx 3rpx rgba(0,0,0,.2);
		margin-top: -34rpx;
		.Lu-dk-tit{
			margin-bottom: 32rpx;
			text:nth-child(1){
				background-color: #1459F6;
				width: 8rpx;
				height: 32rpx;
				display: inline-block;
				border-radius: 32rpx;
				margin-left: -34rpx;
			}
			text:nth-child(2){
				color: #333333;
				font-size: 32rpx;
				padding: 67rpx 0 0 36rpx;
			}
		}
		.Lu-dk-List{
			display: flex;
			align-items: center;
			justify-content: start;
			.Lu-dk-Listimg{
				width: 64rpx;
				height: 64rpx;
			}
			.Lu-dk-Listcenter{
				color: #333333;
				font-size: 24rpx;
				margin-left: 32rpx;
			}
		}
		.Lu-dk-bg{
			background-color: #EBEBEB;
			width: 8rpx;
			height: 30rpx;
			border-radius: 4rpx;
			margin-left: 28rpx;
		}
		.Lu-dk-btn{
			width: 510rpx;
			height: 106rpx;
			background-image: url('~@/static/image/qiandao/fxan.png');
			background-size: 510rpx 106rpx;
			background-repeat: no-repeat;
			line-height: 106rpx;
			text-align: center;
			font-size: 32rpx;
			// margin: 0 auto;
			color: #fff;
			position: absolute;
			left: 90rpx;
			bottom: -50rpx;
		}
		.Lu-dk-List1{
			width: 334rpx;
			height: 290rpx;
			margin: 0 auto;
			background-image: url('~@/static/image/qiandao/hb.png');
			background-size: 334rpx 290rpx;
			background-repeat: no-repeat;
			position: relative;
			.Lu-dk-dayfl{
				top: 42rpx;
				left: 120rpx;
				color: #A96F41;
				position: absolute;
				font-size: 24rpx;
			}
			.Lu-dk-flmoney{
				top: 90rpx;
				left: 88rpx;
				color: #F73C37;
				position: absolute;
				font-size: 28rpx;
				.Lu-dk-flnum{
					font-size: 64rpx;
				}
			}
			.Lu-dk-fllj{
				top: 220rpx;
				left: 72rpx;
				color: #FFFFFF;
				position: absolute;
				font-size: 24rpx;
			}
		}
		.Lu-dk-btn1{
			color: rgba(255,255,255,.4);
		}
	}
	.Lu-F-footer{
		// position: fixed;
		// bottom: 0;
		margin-top: 80rpx;
		// width: 100%;
		padding: 32rpx;
		background-color: #fff;
		border-top-right-radius: 32rpx;
		border-top-left-radius: 32rpx;
		.Lu-F-Lists{
			display: flex;
			align-items: center;
			justify-content: start;
			padding: 0 32rpx;
			view:nth-child(1){
				font-size: 24rpx;
				color: #999999;
			}
			view:nth-child(2){
				font-size: 24rpx;
				color: #999999;
				margin-left: 64rpx;
			}
			.active{
				font-size: 36rpx !important;
				color: #333333 !important;
				position: relative;
			}
			.active:after {
			  /*content 可为空 必须写这句*/
			  content: '';
			  /*设置margin: 0 auto; 加上相对定位的left和right都为零 可让伪元素在active中水平居中*/
			  margin: 0 auto;
			  position: absolute;
			  bottom: -12rpx;
			  left: 0;
			  right: 0;
			  height: 8rpx;
			  width: 32rpx;
			  border-radius: 8rpx;
			  background-color: #2e84ed;
			}
		}
		.Lu-F-ph{
			margin: 32rpx 0rpx 0;
		}
		.Lu-F-phtit{
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color:#333333;
			padding: 0 32rpx;
			.Lu-F-phtit2{
				margin-left: 50rpx;
			}
		}
		.Lu-F-phLists{
			.Lu-F-ph-list{
				// background-color: #C9D8FA;
				height: 46rpx;
				line-height: 46rpx;
				border-bottom: 2rpx solid #EBEBEB;
				// display: table-cell;
				padding: 0 32rpx;
				
				vertical-align: middle;
				.Lu-F-ph-listimg{
					width: 40rpx;
					height: 48rpx;
					text-align: center;
					font-size: 24rpx;
					color: #333333;
					image{
						width: 40rpx;
						height: 48rpx;
						vertical-align: middle;
					}
					
				}
				.Lu-F-ph-listname{
					font-size: 24rpx;
					color: #333333;
					margin-left: 56rpx;
				}
				.Lu-F-ph-listmoney{
					font-size: 24rpx;
					color: #333333;
				}
			}
			.Lu-F-ph-list:nth-child(1){
				background-color: #C9D8FA;
				height: 88rpx;
				line-height: 88rpx;
				border-top-right-radius: 8rpx;
				border-top-left-radius: 8rpx;
				margin-bottom: 8rpx;
				border: none;
			}
			.Lu-F-ph-list:nth-child(2){
				background-color: #C9ECFA;
				height: 64rpx;
				line-height: 64rpx;
				border-top-right-radius: 8rpx;
				border-top-left-radius: 8rpx;
				margin-bottom: 8rpx;
				border: none;
			}
			.Lu-F-ph-list:nth-child(3){
				background-color: #C9FAEF;
				height: 64rpx;
				line-height: 64rpx;
				border-top-right-radius: 8rpx;
				border-top-left-radius: 8rpx;
				margin-bottom: 8rpx;
				border: none;
			}
		}
		.Lu-F-jl{
			margin-top: 32rpx;
			padding: 0 32rpx;
			.Lu-F-jltit{
				font-size: 24rpx;
				color: #333333;
			}
			.Lu-F-jlLists{
				margin-top: 16rpx;
				.Lu-F-jlList{
					height: 54rpx;
					line-height: 54rpx;
					border-bottom:2rpx solid #EBEBEB;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
</style>
